<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <title>首页</title>
    <meta name="decorator" content="cms_default_${site.theme}"/>
    <meta name="description" content="${site.description}"/>
    <meta name="keywords" content="${site.keywords}"/>
</head>
<body>
	<div class="about" id="about" name="1F">
	<div class="wrapper">
	<div class="row">
			<div class="col6 begin-left">
				<h4>总会概况</h4>
				<p class="para2">Association profile</p>
				<p class="para">${rootOfficeInfo }</p>
					
					
				
				<a href="${ctx }/view-2-060719d4bf754b78bd6eda8aa39bd627.html">详情点击</a>
			</div>
			<div class="col6">
				<img src="${ctxStatic}/xh/images/abc12.jpg" alt=" ">
			</div>
	</div>
	</div>
	</div>
<div class="wrapper">
<div class="row">
<div class="col4">
				<p class="bg-blue bg-inverse pd-small"><span style=" float:right; font-size:12px; padding-right:10px;"><a style=" color:#FFFFFF" href="${ctx }/list-18.html">更多</a></span>通知公告</p>	
					
				<p>
				<c:forEach items="${a18 }" var="article">
				<c:if test="${!empty article.link  }">
				<a href="${article.link }">
				</c:if>
				<c:if test="${empty article.link  }">
				<a href="${article.url}">
				</c:if>
				${article.title }</a><br>
				</c:forEach>
			
					</p>
			</div>
<div class="col4">
				<p class="bg-blue bg-inverse pd-small"><span style=" float:right; font-size:12px; padding-right:10px;"><a style=" color:#FFFFFF" href="${ctx }/list-f86ae1acb00542c5a51925748e2e44f7.html">更多</a></span>工作动态</p>
				<p>
				<c:forEach items="${a101 }" var="article">
				<c:if test="${!empty article.link  }">
				<a href="${article.link }">
				</c:if>
				<c:if test="${empty article.link  }">
				<a href="${article.url}">
				</c:if>
				${article.title }</a><br>
				</c:forEach>

					
					</p>
			</div>
	<div class="col4">
				<p class="bg-blue bg-inverse pd-small"><span style=" float:right; font-size:12px; padding-right:10px;"><a style=" color:#FFFFFF" href="${ctx }/list-102.html">更多</a></span>健身知识</p>
				<p>
		<c:forEach items="${a102 }" var="article">
				<c:if test="${!empty article.link  }">
				<a href="${article.link }">
				</c:if>
				<c:if test="${empty article.link  }">
				<a href="${article.url}">
				</c:if>
				${article.title }</a><br>
				</c:forEach>
					
					</p>
			</div>
			<div class="clearfix"> </div>
</div>
	<div class="row">
	<div class="col4">
				<p class="bg-blue bg-inverse pd-small"><span style=" float:right; font-size:12px; padding-right:10px;"><a style=" color:#FFFFFF" href="${ctx }/list-103.html">更多</a></span>政策法规 </p>
				<p>
				<c:forEach items="${a103 }" var="article">
				<c:if test="${!empty article.link  }">
				<a href="${article.link }">
				</c:if>
				<c:if test="${empty article.link  }">
				<a href="${article.url}">
				</c:if>
				${article.title }</a><br>
				</c:forEach>
					
					</p>
			</div>
	<div class="col4">
			<p class="bg-blue bg-inverse pd-small"><span style=" float:right; font-size:12px; padding-right:10px;"><a style=" color:#FFFFFF" href="${ctx }/list-104.html">更多</a></span>《山东体总》</p>
				<p>
				<c:forEach items="${a104 }" var="article">
				<c:if test="${!empty article.link  }">
				<a href="${article.link }">
				</c:if>
				<c:if test="${empty article.link  }">
				<a href="${article.url}">
				</c:if>
				${article.title }</a><br>
				</c:forEach>
					
					</p>
			</div>
	
			<div class="col4">
				<p class="bg-blue bg-inverse pd-small"><span style=" float:right; font-size:12px; padding-right:10px;"><a style=" color:#FFFFFF" href="${ctx }/list-106.html">更多</a></span>精彩回顾</p>
				<p>
				<c:forEach items="${a106 }" var="article">
				<c:if test="${!empty article.link  }">
				<a href="${article.link }">
				</c:if>
				<c:if test="${empty article.link  }">
				<a href="${article.url}">
				</c:if>
				${article.title }</a><br>
				</c:forEach>	
					
					</p>
			</div>
			<div class="clearfix"> </div>
	</div>
</div>
<style>.video_mv{ position:absolute; width:490px; height:385px;left:50%;bottom:110px; padding:15px;}</style>
<!-- video -->
	<div class="video">

		<div><img src="${ctxStatic}/xh/images/222.png" alt=" "></div>
        <div class="video_mv">
         		<div id="a1" style="width: 460px; height: 355px; background-color: rgb(0, 0, 0);">
         		<video controls="" id="ckplayer_a1" width="460" height="355" autoplay="autoplay" loop="loop">
         		</video>
         		</div>

        <p>
          <script type="text/javascript" src="${ctxStatic}/xh/script/ckplayer.js" charset="utf-8"></script>
          <script type="text/javascript">
	var flashvars={
		p:0,
		e:1,
		c:0
		};
	
	var video=['http://vodfile11.news.cn/data/cdn_transfer/9D/FA/9d64299ce5b9454495271c7b4209d4e5df90aefa.mp4->video/mp4','http://www.ckplayer.com/webm/0.webm->video/webm','http://www.ckplayer.com/webm/0.ogv->video/ogg'];
	var support=['all'];
	CKobject.embedHTML5('a1','ckplayer_a1',460,355,video,flashvars,support);
        </script>
        
        </p></div>
				<a class="play-icon popup-with-zoom-anim" href="http://tc.obaidu.net/#small-dialog">
						

				</a>

					<!-- pop-up-box -->
					<script type="text/javascript" src="${ctxStatic}/xh/script/modernizr.custom.min.js"></script>    
					<link href="${ctxStatic}/xh/css/popuo-box.css" rel="stylesheet" type="text/css" media="all">
					<script src="${ctxStatic}/xh/script/jquery.magnific-popup.js" type="text/javascript"></script>
					<!--//pop-up-box -->
					<div id="small-dialog" class="mfp-hide">
						<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="460">
<param name="movie" value="http://test.jinzhangqiu.cn/templets/vcastr22.swf?vcastr_file=/sp/1.mp4">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="http://test.jinzhangqiu.cn/templets/vcastr22.swf?vcastr_file=/sp/1.mp4" quality="high" wmode="opaque" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="460">
</object>
					</div>

					<script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
					</script>
	</div>
<div class="portfolio" id="portfolio">
	<div class="wrapper">
		<!-- Portfolio Starts Here -->
	<div class="portfolios entertain_box  wow fadeInUp" data-wow-delay="0.4s" id="project">
			<div class="portfolio-info">
				<p class="bg-blue bg-inverse pd-small"><span style=" float:right; font-size:12px; padding-right:10px;"><a style=" color:#FFFFFF" href="${ctx}/list-106.html">更多</a></span><span style="margin-left:50%">精彩回顾</span></p>
			</div>
<!--
					<ul id="filters" class="clearfix">
							<li><span class="filter active" data-filter="card icon web">精彩回顾</span></li>
							<li><span class="filter" data-filter="app">全民健身</span></li>
							<li><span class="filter" data-filter="card">竞技风采</span></li>
							<li><span class="filter" data-filter="icon">体育大观</span></li>
					</ul>
-->
		
					<div id="portfoliolist">
					<c:forEach items="${a106 }" var="article">
						<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1; ">
							<div class="portfolio-wrapper">		
								<a href="${article.image }" class="b-link-stripe b-animate-go   swipebox" title="">
								<img src="${article.image }" width="400px" height="220px">
								</a>
								<div style=" margin-top:10px;" class="b-wrapper">
								<a style="float:left;margin-right:10px;" href="${article.url}">${article.title }</a><br>
                                                               
								</div>
								
							</div>
						</div>
					</c:forEach>
						

						
						
					<div class="clearfix"></div>
					</div>
		
	</div>
			<link rel="stylesheet" href="${ctxStatic}/xh/css/swipebox.css">
				<script src="${ctxStatic}/xh/script/jquery.swipebox.min.js"></script> 
					<script type="text/javascript">
						jQuery(function($) {
							$(".swipebox").swipebox();
						});
					</script>
				<!-- Portfolio Ends Here -->
				<script type="text/javascript" src="${ctxStatic}/xh/script/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {
						var filterList = {
							init: function () {
								// MixItUp plugin
							// http://mixitup.io
							$('#portfoliolist').mixitup({
								targetSelector: '.portfolio',
								filterSelector: '.filter',
								effects: ['fade'],
								easing: 'snap',
								// call the hover effect
								onMixEnd: filterList.hoverEffect()
							});	
						},
						hoverEffect: function () {
							// Simple parallax effect
							$('#portfoliolist .portfolio').hover(
								function () {
									$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
									$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
								},
								function () {
									$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
									$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
								}		
							);				
						}
					};
					// Run the show!
						filterList.init();
					});	
					</script>
	</div>
	</div>
		<div class="portfolio-bottom">
	<div class="wrapper">
<!-- Slider-starts-Here -->
				<script src="${ctxStatic}/xh/script/responsiveslides.min.js"></script>
				 <script>
				    // You can also use "$(window).load(function() {"
				    $(function () {
				      // Slideshow 4
				      $("#slider3").responsiveSlides({
				        auto: true,
				        pager: true,
				        nav: false,
				        speed: 500,
				        namespace: "callbacks",
				        before: function () {
				          $('.events').append("<li>before event fired.</li>");
				        },
				        after: function () {
				          $('.events').append("<li>after event fired.</li>");
				        }
				      });
				
				    });
				  </script>
			<!--//End-slider-script -->
			<div id="top" class="callbacks_wrapper">
				<ul class="rslides callbacks callbacks1" id="slider3">
					<li id="callbacks1_s0" class="callbacks1_on" style="display: block; float: left; position: relative; opacity: 1; z-index: 2; transition: opacity 500ms ease-in-out;">
						<div class="portfolio-bottom-info">
							<div class="fig4">
								<span> </span>
							</div>
							<h4>LOREM IPSUM DOLOR SIT,AD ETIAM SIT ONER PORTLE<span>OL DEIAN BOST SIT EMIST</span></h4>
							<p>WILL STEPHENSON</p>
						</div>
					</li>
					<li id="callbacks1_s1" class="" style="display: block; float: none; position: absolute; opacity: 0; z-index: 1; transition: opacity 500ms ease-in-out;">
						<div class="portfolio-bottom-info">
							<div class="fig4">
								<span> </span>
							</div>
							<h4>VONEC RUTRUM CONGUE LEO,EGET NON NULLA ONER<span> PORTITTOR BOST SIT EMIST</span></h4>
							<p>JOHN STEPHENSON</p>
						</div>
					</li>
					<li id="callbacks1_s2" class="" style="display: block; float: none; position: absolute; opacity: 0; z-index: 1; transition: opacity 500ms ease-in-out;">
						<div class="portfolio-bottom-info">
							<div class="fig4">
								<span> </span>
							</div>
							<h4>LOREM VONEC RUTRUM CONGUE LEO ETIAM SIT ONER<span>PROIN EGET BOST SIT RISUS</span></h4>
							<p>MICHEAL STEPHENSON</p>
						</div>
					</li>
				</ul><ul class="callbacks_tabs callbacks1_tabs"><li class="callbacks1_s1 callbacks_here"><a href="#" class="callbacks1_s1">1</a></li><li class="callbacks1_s2"><a href="#" class="callbacks1_s2">2</a></li><li class="callbacks1_s3"><a href="#" class="callbacks1_s3">3</a></li></ul>
			</div>
<!-- Slider-ends-Here -->
	</div>
	</div>
	
		<div class="contact" id="contact">
	<div class="wrapper">
		<div class="row">
		<div  class="col6">
				<h5><p class="bg-blue bg-inverse pd-small"> 地市体育总会</p></h5>
				<div class="row">

				<c:forEach items="${rootCity }" var="office"  varStatus="status">
				<div style="display:block;margin-top:10px" class="col2">
				<a style="color:#000" href="${ctx }/xiehui/${office.id}">${office.name}</a>&nbsp;
				</div>
				</c:forEach>
				</div>
			
			</div>
			<div  class="col6">
				<h5><p class="bg-blue bg-inverse pd-small">  省级体育协会</p></h5>
				<div class="row">
				<c:forEach items="${rootOffice }" var="office"  varStatus="status">
				<c:if test="${status.index lt 50}">
				<div style="display:block;margin-top:10px" class="col2">
				<a style="color:#000" href="${ctx }/xiehui/${office.id}">${office.name}</a>
				</div>
				<div style="display:block;margin-top:10px" class="col2">
				<a style="font-weight:bold;margin-top:10px" href="${ctx }/xiehui/15">更多...</a>
				</div>
				</c:if>
				</c:forEach>
				</div>
				
				
			</div>
			
			</div>
		<div class="row map">
		<!--------------------------->
		
		
  <!--引用百度地图API-->
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1mv0bXdgk7mi9sTapiBghGMq"></script>

  <!--百度地图容器-->
  <div class="col11" style="height:356px;border:#ccc solid 1px;" id="dituContent"></div>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker();//向地图中添加marker
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(117.01522,36.652616);//定义一个中心点坐标
        map.centerAndZoom(point,16);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }
    
    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
	map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
    
    //标注点数组
    var markerArr = [{title:"山东省体育协会",content:"电话：0531-66116621<br/>传真：0531-82063649<br/>邮箱：spr@163.com",point:"117.015634|36.653716",isOpen:1,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
		 ];
    //创建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
			var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
			var iw = createInfoWindow(i);
			var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
			marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
			
			(function(){
				var index = i;
				var _iw = createInfoWindow(i);
				var _marker = marker;
				_marker.addEventListener("click",function(){
				    this.openInfoWindow(_iw);
			    });
			    _iw.addEventListener("open",function(){
				    _marker.getLabel().hide();
			    })
			    _iw.addEventListener("close",function(){
				    _marker.getLabel().show();
			    })
				label.addEventListener("click",function(){
				    _marker.openInfoWindow(_iw);
			    })
				if(!!json.isOpen){
					label.hide();
					_marker.openInfoWindow(_iw);
				}
			})()
        }
    }
    //创建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //创建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    
    initMap();//创建和初始化地图
</script>
		</div>	
		</div>
	</div>
	</div>
	
	</body>
</html>